<template>
  <div class="daily-report-table">
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ y: '3.9rem' }"
      :pagination="false"
      size="small"
    >
      <!-- 类型列 -->
      <template slot="type" slot-scope="scope">
        <span class="type-cell">
          <span class="badge-container">
            <a-icon class="badge-new" v-if="scope.isNew" type="fire" theme="filled" />
            <!-- <a-icon class="badge-new" v-if="scope.isNew" type="fire" /> -->
            <!-- <span v-if="scope.isNew" class="badge-new"></span> -->
          </span>
          <span class="type-text">{{ scope.value }}</span>
        </span>
      </template>
      
      <!-- 其他列的默认渲染 -->
    </a-table>
  </div>
  
</template>

<script>
export default {
  name: 'DailyReport',
  data() {
    return {
      columns: [
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          scopedSlots: { customRender: 'type' },
          width: 130,
        },
        {
          title: '开单人',
          dataIndex: 'creator',
          key: 'creator',
          width: 120,
        },
        // {
        //   title: '物料名称',
        //   dataIndex: 'materialName',
        //   key: 'materialName',
        //   width: 150,
        // },
        // {
        //   title: '数量',
        //   dataIndex: 'quantity',
        //   key: 'quantity',
        //   width: 100,
        // },
        {
          title: '时间',
          dataIndex: 'time',
          key: 'time',
          width: 150,
        },
       
      ],
      // ... existing code ...
      data: [
        {
          key: '1',
          type: { value: '成品入库单', isNew: true },
          materialName: '钢材A',
          quantity: 150,
          time: '2024-03-21 09:30:00',
          creator: '张三',
        },
        {
          key: '2',
          type: { value: '送货单', isNew: true },
          materialName: '铝材B',
          quantity: 200,
          time: '2024-03-21 10:15:00',
          creator: '李四',
        },
        {
          key: '3',
          type: { value: '拣货单', isNew: true },
          materialName: '铜材C',
          quantity: 80,
          time: '2024-03-21 11:20:00',
          creator: '王五',
        },
        {
          key: '4',
          type: { value: '发货通知', isNew: true },
          materialName: '不锈钢D',
          quantity: 120,
          time: '2024-03-21 13:45:00',
          creator: '赵六',
        },
        {
          key: '5',
          type: { value: '拣料通知', isNew: true },
          materialName: '合金E',
          quantity: 90,
          time: '2024-03-21 14:30:00',
          creator: '孙七',
        },
        {
          key: '6',
          type: { value: '调拨单', isNew: true },
          materialName: '钢材F',
          quantity: 160,
          time: '2024-03-21 15:20:00',
          creator: '周八',
        },
        {
          key: '7',
          type: { value: '代工厂送货单', isNew: true },
          materialName: '铝材G',
          quantity: 180,
          time: '2024-03-21 16:10:00',
          creator: '吴九',
        },
        {
          key: '8',
          type: { value: '代工厂发料单', isNew: true },
          materialName: '铜材H',
          quantity: 95,
          time: '2024-03-21 16:45:00',
          creator: '郑十',
        },
        {
          key: '9',
          type: { value: '代工厂调拨单', isNew: true },
          materialName: '不锈钢I',
          quantity: 110,
          time: '2024-03-21 17:30:00',
          creator: '张三',
        },
        {
          key: '10',
          type: { value: '发料单', isNew: true },
          materialName: '合金J',
          quantity: 130,
          time: '2024-03-21 17:50:00',
          creator: '李四',
        },
        {
          key: '11',
          type: { value: '成品入库单', isNew: false },
          materialName: '钢材K',
          quantity: 140,
          time: '2024-03-20 09:15:00',
          creator: '王五',
        },
        {
          key: '12',
          type: { value: '送货单', isNew: false },
          materialName: '铝材L',
          quantity: 170,
          time: '2024-03-20 10:30:00',
          creator: '赵六',
        },
        {
          key: '13',
          type: { value: '拣货单', isNew: false },
          materialName: '铜材M',
          quantity: 85,
          time: '2024-03-20 11:45:00',
          creator: '孙七',
        },
        {
          key: '14',
          type: { value: '发货通知', isNew: false },
          materialName: '不锈钢N',
          quantity: 125,
          time: '2024-03-20 13:20:00',
          creator: '周八',
        },
        {
          key: '15',
          type: { value: '拣料通知', isNew: false },
          materialName: '合金O',
          quantity: 95,
          time: '2024-03-20 14:15:00',
          creator: '吴九',
        },
        {
          key: '16',
          type: { value: '调拨单', isNew: false },
          materialName: '钢材P',
          quantity: 155,
          time: '2024-03-20 15:10:00',
          creator: '郑十',
        },
        {
          key: '17',
          type: { value: '代工厂送货单', isNew: false },
          materialName: '铝材Q',
          quantity: 175,
          time: '2024-03-20 16:00:00',
          creator: '张三',
        },
        {
          key: '18',
          type: { value: '代工厂发料单', isNew: false },
          materialName: '铜材R',
          quantity: 90,
          time: '2024-03-20 16:30:00',
          creator: '李四',
        },
        {
          key: '19',
          type: { value: '代工厂调拨单', isNew: false },
          materialName: '不锈钢S',
          quantity: 115,
          time: '2024-03-20 17:15:00',
          creator: '王五',
        },
        {
          key: '20',
          type: { value: '发料单', isNew: false },
          materialName: '合金T',
          quantity: 135,
          time: '2024-03-20 17:40:00',
          creator: '赵六',
        }
      ],
// ... existing code ...
    }
  },
}
</script>

<style lang="less" scoped>

.daily-report-table {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  :deep(.ant-table-fixed-header .ant-table-scroll .ant-table-header) {
    opacity: 1;
    padding: 0 !important;
    overflow: auto !important;
    margin-bottom: -10px !important;
  }
  :deep(.ant-table) {
    background: transparent;
  }
  :deep(.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body ){
    position: relative;
    background: transparent;
  }
  :deep(.ant-table-thead > tr > th) {
    background: transparent;
    color: #fff;
    text-align: center;
    border: none;
  }
  
  :deep(.ant-table-tbody > tr > td) {
    background: transparent !important;
    border: none;
    color: #87dfff;
    text-align: center;
  }

  :deep(.ant-table-tbody > tr:hover > td) {
    background: transparent !important;
  }

  // 移除滚动条
  :deep(.ant-table-body::-webkit-scrollbar) {
    display: none;
  }

  // 移除表格边框
  :deep(.ant-table) {
    border: none;
  }

  :deep(.ant-table-container) {
    border: none;
  }
}

// 新数据标识图标组件
.badge-new {
  display: inline-block;
  color: #ff5151;
  animation: pulse-glow 0.5s ease-in-out infinite;
  transform-origin: center;
  
  &:hover {
    animation: shake 0.5s ease-in-out;
  }
}

@keyframes pulse-glow {
  0% {
    opacity: 1;
    transform: scale(1);
    // text-shadow: 0 0 10px rgba(250, 44, 44, 0.9);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
    // text-shadow: 0 0 20px rgba(250, 44, 44, 0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    // text-shadow: 0 0 10px rgba(250, 44, 44, 0.9);
  }
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

// 新增类型单元格的样式
.type-cell {
  display: flex;
  align-items: center;
}

.badge-container {
  width: 14px;  // 固定宽度，确保占位
  display: inline-block;
}

.type-text {
  flex: 1;
}
</style>